/* 
解析歌词字符串，得到一个歌词对象的数组
每个歌词对象:
{time:开始时间,words:歌词内容}
*/
function parseLrc() {
    const lines = lrc.split("\n");
    const result = [];
    for (let i = 0; i < lines.length; i++) {
      const str = lines[i];
      const parts = str.split("]");
      const timeStr = parts[0].substring(1);
      const obj = {
        time: parseTime(timeStr),
        words: parts[1] || "",
      };
      result.push(obj);
    }
    return result;
  }
  
  function parseTime(timeStr) {
    const parts = timeStr.split(":");
    // +转换为数字
    return +parts[0] * 60 + +parts[1];
  }
  
  const lrcData = parseLrc();
  // console.log(lrcData);
  
  // 获取需要的dom
  var doms = {
    audio: document.querySelector("audio"),
    ul: document.querySelector(".lrc-list"),
    container: document.querySelector(".container"),
  };
  
  /* 
  计算出当前情况下,lrcData数组中应该高亮显示的歌词下标
  找到的是第一个大于当前时间的上一句
  */
  function findIndex() {
    const curTime = doms.audio.currentTime; //播放器当前时间
    for (let i = 0; i < lrcData.length; i++) {
      if (curTime < lrcData[i].time) {
        return i - 1;
      }
    }
    // 播放到最后一句了
    return lrcData.length - 1;
  }
  
  // 创建歌词元素
  function createLrcEle() {
    // 创建文档片段
    const frag = document.createDocumentFragment();
    for (let i = 0; i < lrcData.length; i++) {
      const li = document.createElement("li");
      li.textContent = lrcData[i].words;
      frag.appendChild(li);
    }
    doms.ul.appendChild(frag);
  }
  
  createLrcEle();
  
  // 容器高度
  const containerHeight = doms.container.clientHeight;
  // 每个li的高度
  const liHeight = doms.ul.children[0].clientHeight;
  // 最大偏移量
  const maxOffset = doms.ul.clientHeight - containerHeight;
  
  /* 
  设置ul元素的偏移量
  */
  function setOffset() {
    const index = findIndex();
    let offset = liHeight * index + liHeight / 2 - containerHeight / 2;
    if (offset < 0) {
      offset = 0;
    }
    if (offset > maxOffset) {
      offset = maxOffset;
    }
    doms.ul.style.transform = `translateY(-${offset}px)`;
    // 去除之前样式
    const oriStyLi = doms.ul.querySelector(".active");
    if (oriStyLi) {
      oriStyLi.classList.remove("active");
    }
    //   console.log(index);
    const li = doms.ul.children[index];
    if (li) {
      doms.ul.children[index].classList.add("active");
    }
  }
  
  doms.audio.addEventListener("timeupdate", setOffset);
  
